<template>
  <div ref="rightDialog" :class="{'show':panelShow}" class="rightPanel-container rightDialog">
    <div v-if="modal" :style="{position: modalAppendToBody?'fixed':'absolute'}" class="rightPanel-background" @click="bgClick" />
    <div :style="{width:panelWidth,position: modalAppendToBody?'fixed':'absolute'}" class="rightPanel" :class="{'cardShadow':!modal}">
      <el-button v-if="panelShow&&showClose" size="mini" plain="" icon="el-icon-close" class="handle-button" @click="modalClose" />
      <div v-if="panelShow" :style="{height:autoHeight?'auto':maxHeight,maxHeight:maxHeight}" class="rightPanel-Main">
        <div class="dialog-title">{{ title }}</div>
        <div class="el-dialog__body rightPanel-Body">
          <slot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'RightDialog',
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    title: {
      default: '',
      type: String
    },
    width: {
      default: '300',
      type: [String, Number]
    },
    modal: {
      default: true,
      type: Boolean
    },
    modalAppendToBody: {
      default: false,
      type: Boolean
    },
    closeOnClickModal: {
      default: true,
      type: Boolean
    },
    showClose: {
      default: true,
      type: Boolean
    },
    autoHeight: {
      default: true,
      type: Boolean
    }
  },
  data() {
    return {
      panelShow: false,
      panelWidth: '300px',
      maxHeight: 'calc(100vh - 100px)'
    }
  },
  watch: {
    visible(value) {
      console.log('RightDialog')
      console.log(value)
      if (value) {
        this.visibleChange()
      } else {
        this.panelShow = false
        this.$emit('dialogClose', {})
      }
    }
  },
  mounted() {
    this.visibleChange()
  },
  methods: {
    visibleChange() {
      this.panelShow = this.visible
      var panelWidth = this.width || 300
      if (typeof (panelWidth) === 'number' || panelWidth.indexOf('px') === -1) {
        panelWidth += 'px'
      }
      this.panelWidth = panelWidth
      if (this.modalAppendToBody) {
        this.maxHeight = '100vh'
      }
    },
    bgClick() {
      if (this.closeOnClickModal) {
        this.$emit('update:visible', false)
      }
    },
    modalClose() {
      this.$emit('update:visible', false)
    },
    addEventClick() {
      window.addEventListener('click', this.closeSidebar)
    },
    insertToBody() {
      const elx = this.$refs.rightDialog
      const body = document.querySelector('body')
      body.insertBefore(elx, body.firstChild)
      // setTimeout(() => {
      //   elx.remove()
      // }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.rightPanel-background {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity .3s cubic-bezier(.7, .3, .1, 1);
  background: rgba(0, 0, 0, .2);
  z-index: -1;
}

.rightPanel {
  width: 100%;
  // height: 100vh;
  // max-height: calc(100%);
  top: 0;
  right: 0;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .05);
  transition: all .25s cubic-bezier(.7, .3, .1, 1);
  transform: translate(100%);
  background: #fff;
  z-index: 200;
  // overflow-y: auto;
  &.cardShadow{
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    border: 1px solid #EBEEF5;
  }
}

.rightPanel-Main{
  // max-height: calc(100vh - 100px);
  overflow-y: auto;
}

.show {
  transition: all .3s cubic-bezier(.7, .3, .1, 1);

  .rightPanel-background {
    z-index: 100;
    opacity: 1;
    width: 100%;
    height: 100%;
  }

  .rightPanel {
    transform: translate(0);
  }
  .dialog-title{
    text-align: center;font-size: 18px;line-height: 39px;
    // box-shadow: 0 1px 0px 1px #DCDFE6;
  }
}

.handle-button {
  position: absolute;
  left: -50px;top:0;
  text-align: center;height: 40px;
  font-size: 22px;
  z-index: 0;
  pointer-events: auto;
  cursor: pointer;
  border-bottom-left-radius: 30px;border-top: 0;border-right: 0;
}
</style>
